<template>
  <view class="headerBox">
    <!-- 头像 -->
    <view class="imgBox">
      <view v-if="register" class="noshow" @tap="show = true">
        <image :src="getUseImg"></image>
        <view class="text">
          登录
        </view>
      </view>
      <view v-else class="noshow">
        <image :src="imag"></image>
        <view class="text">
          {{text}}
        </view>
      </view>
			<view v-if="!register" class="outLogin" @tap="outLogin">
				<text class="iconfont icon-tuichudenglu" style="font-size: 50rpx;"></text>
			</view>
    </view>

    <view class="nav">
      <navigator url="/subpage/myDataList/followUp" open-type="navigate">
        <text class="iconfont icon-dianzisuifang"></text>
        我的随访
      </navigator>
      <navigator url="/subpage/myDataList/myDevice" open-type="navigate">
				<!-- 暂无设备 -->
        <text class="iconfont icon-ganzhishebei"></text>
        我的设备
      </navigator>
      <navigator url="/pages/subscribeInfo/subscribeInfo?uphone=${this.docInf.uphone}" open-type="navigate">
        <text class="iconfont icon-yuyue1"></text>
        预约记录
      </navigator>
      <!-- <navigator url="/subpage/myDataList/myRemind" open-type="navigate">
        <text class="iconfont icon-tixingnaoling"></text>
        我的提醒
      </navigator> -->
    </view>

    <view class="navList">
      <navigator url="/subpage/physicalCondition/physicalCondition">
        <view class="navLink">
          <text class="iconfont icon-xinxicaiji"></text>
          身体信息
        </view>
      </navigator>
			<!-- 换色换肤 -->
     <!-- <navigator url="/subpage/myStyle/myStyle" open-type="navigate">
        <view class="navLink">
          <text class="iconfont icon-shezhi"></text>
          设置
        </view>
      </navigator> -->
<!--      <navigator >
        <view class="navLink">
          <text class="iconfont icon-shouye"></text>
          亲情连接
        </view>
      </navigator> -->
					<!-- 放上自己的电话 -->
<!--      <navigator >
        <view class="navLink">
          <text class="iconfont icon-kefu"></text>
          客服
        </view>
      </navigator> -->
      <navigator url="/subpage/myDataList/feedback" class="fankui">
				<!-- 做一个小接口和表放反馈信息和反馈人信息 -->
        <view class="navLink">  
          <text class="iconfont icon-fankuibeifen"></text>
          问题反馈
        </view>
      </navigator>
    </view>

    <u-popup :show="show" :round="10" mode="bottom" @close="show = false" closeable>
      <view class="registerBut">
				<!-- #ifdef MP-WEIXIN -->
					<view class="topTitle">
						请授权登录
					</view>
				<!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
					<view class="h2Text">
						为了更好的为你提供服务，请允许微信授权后使用功能
					</view>
		    <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
					<u-button color="#17D56B" shape="circle" size="large" @tap="getInfo">
						<view class="butT">
							<u-icon name="weixin-fill" color="#fff" size="29"></u-icon>
							<text>登录授权</text>
						</view>
					</u-button>
		    <!-- #endif -->
				
				<!-- #ifdef H5 -->
					<view class="topTitle">
						登录
					</view>
				<!-- #endif -->
        <!-- #ifdef H5 -->
					<u--input
						placeholder="请输入手机号"
						border="surround"
						v-model="useVal"
						focus
						shape="circle"
						type="number"
					></u--input>
		    <!-- #endif -->
				<!-- #ifdef H5 -->
					<view class="useBut">
						<u-button color="#17D56B" shape="circle" size="large" @tap="loginPhon">
							<view class="butT">
								<text>登录</text>
							</view>
						</u-button>
					</view>
				<!-- #endif -->
				
      </view>
	  </u-popup>
  </view>
</template>

<script>
  export default {
    name: 'myHeader',
    data() {
      return {
        register: true,
        show: false,
        text: '',
        imag: '',
				//#ifdef H5
					useVal: ''
				//#endif
      }
    },
		mounted () {
			let info = uni.getStorageSync('use_info');
			if(info.nickName) {
				this.register = false
				this.imag = info.avatarUrl
				this.text = info.nickName
			}
		},
    methods: {
			outLogin: function () {
				uni.showModal({
					title: '提示',
					content: '退出登录',
					success: res => {
						if (res.confirm) {
							this.register = true
							this.imag = ''
							this.text = ''
							uni.removeStorage({
								key: 'openid'
							});
							uni.removeStorage({
								key: 'use_info'
							});
						}
					}
				});
			},
      getInfo: function () { //2022年接口即将失效
        this.show = false
				let thet = this
			
				function Login() {
					uni.login({
						provider: 'weixin',
						success: async function (loginRes) {
							let {data: res} = await thet.$http.post(`/myInfo/login?code=${loginRes.code}`)
							uni.setStorageSync('openid', res.openid)
						}
					})
					wx.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (result) => {
							thet.register = false
							thet.imag = result.userInfo.avatarUrl
							thet.text = result.userInfo.nickName
							uni.setStorageSync('use_info', 
								{
									avatarUrl: result.userInfo.avatarUrl,
									nickName: result.userInfo.nickName
								},
							);
						}
					})
				}
				
				uni.getSetting({ //获取是否有获取用户信息的权限
				  success(res) {
				    if(res.authSetting['scope.userInfo']) { //有则获取唯一标识符openid
							Login()
						} else {
							uni.openSetting({
								success (res) {
									if(res.authSetting['scope.userInfo']) {
										Login()
									}
								}
							})
						}
				  }
				})
      },
			//#ifdef H5
			loginPhon: function () {
				if(this.useVal.trim()) {
					uni.setStorageSync('openid', 'o8NtJ4yXE-LrH5fH4kcUsde3BwIA')
					this.register = false
					this.imag = this.getUseImg
					this.text = 'H5用户'
					this.show = false
					this.useVal = ''
				}
			},
			//#endif
    },
		computed: {
			getUseImg () {
				return this.$url + '/state/myData/samurai.png'
			}
		}
  }
</script>

<style lang="scss" scoped>
.headerBox {
	background:white;
  height: 100%;
  width: 100%;
  // 头像

  .imgBox {
    display: flex;
    justify-items: center;
		justify-content: space-between;
		padding-bottom: 24rpx;
		.outLogin {
			display: flex;
			align-items: center;
			margin-right: 50rpx;
			>text {
				height: 0rpx;
			}
		}
  }

  .nav {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 30rpx solid rgba($color: #f4f4f4, $alpha: .8);

    navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .iconfont {
      font-size: 60rpx;
      margin-bottom: 6rpx;
    }
  }

  .navList {
    padding: 0 30rpx 20rpx 30rpx;
    >navigator {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40rpx 10rpx;
      padding-right: 45rpx;
      border-bottom: 2rpx solid rgba($color: #999, $alpha: .5);
			.navLink {
				display: flex;
			}
    }
    .iconfont {
      margin-right: 10rpx;
      font-size: 42rpx;
    }
    .fankui {
      border: none;
    }
  }

  .noshow {
    display: flex;
    align-items: center;
    font-size: 42rpx;
    margin-left: 30rpx;
    margin-top: 30rpx;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
  }
  .registerBut {
    padding: 30rpx;
    padding-top: 100rpx;
    .topTitle {
      font-size: 50rpx;
      // font-weight: 700;
      margin-bottom: 30rpx;
    }
    .h2Text {
      margin-bottom: 60rpx;
    }
		.useBut {
			margin-top: 40rpx;
		}
  }

  // 二维码
  // .imgBox {
  //   display: flex;
  //   justify-content: center;
  //   align-content: center;

  //   .imgList1 {
  //     width: 70rpx;
  //     height: 70rpx;
	// 		transform: translateX(40rpx);
  //   }
  //   .imgList2 {
  //     width: 40rpx;
  //     height: 40rpx;
	// 		transform: translate(40rpx,10rpx);
  //   }
  // }
}
.butT {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  >text {
    margin-left: 10rpx;
  }
}
</style>
